<div fxLayout="row">
    <div fxFlex="10" fxFlex.gt-sm="20"></div>
    <div fxFlex="90" fxFlex.gt-sm="80">
        <h1 class="header__title">{{'topHeroes' | translate}}</h1>
        <mat-progress-spinner *ngIf="!heroes"
                              class="progress__spinner"
                              [color]="'primary'"
                              [mode]="'indeterminate'">
        </mat-progress-spinner>
        <div id="heroes-list" *ngIf="heroes">
            <ng-container *ngFor="let hero of heroes">
                <mat-card class="hero-card">
                    <mat-card-header>
                        <div (click)="seeHeroDetails(hero)" mat-card-avatar class="hero-header__image"
                             [ngStyle]="{'background-image': 'url(assets/images/heroes/' + hero.id + '-thumbnail.jpg)'}"></div>
                        <mat-card-title (click)="seeHeroDetails(hero)">{{hero.name}}</mat-card-title>
                        <mat-card-subtitle (click)="seeHeroDetails(hero)">{{hero.alterEgo}}</mat-card-subtitle>
                        <div class="flex-spacer"></div>
                        <div class="hero-actions">
                            {{hero.likes}}
                            <mat-icon matTooltip="{{(canVote ? 'canVote' : 'cannotVote') | translate}}"
                                      [matTooltipPosition]="'above'"
                                      class="icon__like--red" (click)="like(hero)">favorite
                            </mat-icon>
                        </div>
                    </mat-card-header>
                    <img (click)="seeHeroDetails(hero)" mat-card-image src="assets/images/heroes/{{hero.id}}.jpg">
                </mat-card>
            </ng-container>
        </div>
    </div>
    <div fxFlex="10" fxFlex.gt-sm="20"></div>
</div>
